<!--
 * @Description: 学习react
 * @Author: admin
 * @Date: 2021-06-10 09:04:21
 * @LastEditors: admin
 * @LastEditTime: 2021-06-10 09:53:30
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <!-- 引入react依赖 -->
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <!-- jsx语法解析 -->
  <script src="./babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>
<script type="text/babel">

  function myTime() {
    const element = 
    (<div>
      <h1>Hello，World</h1>
      <h2>当前时间是{new Date().toLocaleTimeString()}</h2>
    </div> );
  ReactDOM.render(
    element,
    document.getElementById('root')
  )
}
setInterval(myTime,1000)
  // JSX 是js的语法扩展
  // // 在jsx中嵌入表达式
  // const name = "zhangSan";
  // function myAdd(a,b) {
  //   return a+b;
  // }
  // const myH1 = <h1> Hello, {name} {2+2} {myAdd(5,6 )}</h1>;

  // ReactDOM.render(
  //   myH1,
  //   document.getElementById('root')
  // )
  // JSX的特定属性
  // const myId = "myDiv2"
  // const element = (<div>
  //   <div id="myDiv">div1</div>
  // <div id={myId}>div2</div>
  // <img src="" alt="" />
  // </div>)
  
  // ReactDOM.render(
  //   element,
  //   document.getElementById('root')
  // )

</script>

</html>